<template>
	<view class="content">
		<view class="topImg">
			<view class="topImg-nik1"></view>
			<view class="topImg-nik">
				<image :src="userData.avatar ? userData.avatar : ''" @click="chooseImage"></image>
			</view>
		</view>
		<view class="table">
			<view class="table-nik">
				<view class="table-nik-item">
					<view>宠物名</view>
					<input style="text-align: right;color: #313131;" type="text" placeholder="宠物昵称" v-model="userData.enterpriseName" />
				</view>
				<view class="table-nik-item">
					<view>Pid</view>
					<input style="text-align: right;color: #313131;" type="text" placeholder="请填写名字" v-model="userData.id" />
				</view>
				<view class="table-nik-item">
					<view>品种</view>
					<view @click="setUrl"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="cascade != '请选择品种'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{cascade}}</span></view>
				</view>
				<view class="table-nik-item">
					<view>性别</view>
					<view @click="gender = true"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="genders != '请选择性别'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{genders}}</span></view>
				</view>
				<view class="table-nik-item">
					<view>生日</view>
					<view @click="time = true"><u-icon name="arrow-right" style="margin-top: 5rpx;" color="#BFBFBF" size="24"></u-icon><span :style="times != '请填写生日'?'margin-right: 20rpx;color: #313131':'margin-right: 20rpx;'">{{times}}</span></view>
				</view>
				<view class="table-nik-item2">
					<view>宠物铭牌</view>
				</view>
				<view class="table-nik-item2">
					<view>出彩的签名可以吸引宠粉哦~</view>
				</view>
			</view>
		</view>
		
		<view class="button">
			<u-button type="primary" class="styleCss"  hover-class="none" shape="circle" @click="setData">确认</u-button>
		</view>
		<u-select v-model="gender" :list="list" @confirm="confirm"></u-select>
		<u-calendar v-model="time" mode="date" @change="getTime"></u-calendar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			gender: false,
			genders: '请选择性别',
			time: false,
			list: [
				{
					label: '男'
				},
				{
					label: '女'
				}
			],
			times: '请填写生日',
			cascade: '请选择品种',
			userData:{
				avatar:undefined,
				id: '123'
			}
		}
	},
	methods:{
		setUrl(){
			uni.navigateTo({
				url:'../cascade/cascade'
			})
		},
		confirm(e){
			this.genders = e[0].label
		},
		getTime(e){
			this.times = e.result
		},
		chooseImage(){
			// uni.chooseImage({
			// 	count:1,//限制最大上传图片数量
			// 	sizeType: ['original', 'compressed'],//图片压缩还是原图
			// 	success: (res) => {
			// 	//图片选择成功的回调
			// 	//res中返回一个图片本地的临时地址
			// 		this.userData.avatar = res.tempFilePaths[0]
			// 	}
			// })
			uni.chooseImage({
				count:1,
			    success: (chooseImageRes) => {
					this.userData.avatar = chooseImageRes.tempFilePaths[0]
					console.log(chooseImageRes)
			        // const tempFilePaths = chooseImageRes.tempFilePaths;
			    //     uni.uploadFile({
			    //     	url: this.commonApi.uploadImage,
			    //     	filePath: tempFilePaths[0],
			    //     	header: {
			    //     		token: uni.getStorageSync('token')
			    //     	},
			    //     	name: 'file',
			    //     	formData: {
			    //     		folder: 4
			    //     	},
			    //     	success: res => {
							// console.log(res)
			    //     		let img = JSON.parse(res.data);
			    //     		this.userData.avatar = img.data;
			    //     	},
			    //     	fail: res => {
			    //     	}
			    //     });
			    }
			});
		}
	},
	onLoad(option) {
		this.cascade = option.cascade
	}
};
</script>

<style lang="scss" scoped>
	.styleCss{
		width: 660rpx;
	}
	.button{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: white;
		padding: 60rpx 0;
		z-index: 1;
	}
	.table-nik-item2{
		width: 100%;
		// height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		// border-bottom: 2rpx solid #f2f2f2;
		color: #A0A0A0;
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.table-nik-item{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		border-bottom: 2rpx solid #f2f2f2;
		color: #A0A0A0;
		font-size: 30rpx;
		view:nth-of-type(1){
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
		}
		view:nth-of-type(2){
			width: 70%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
		}
	}
	.table-nik{
		width: 700rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.table{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.topImg-nik1{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background: #F5F5F5;
		position: absolute;
		top: 25rpx;
	}
	.topImg-nik{
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../../../static/img/addpet.png) no-repeat center center;
		background-size: 40% 40%;
		position: absolute;
		top: 25rpx;
		image{
			width: 190rpx;
			height: 190rpx;
			border-radius: 50%;
		}
	}
	.topImg{
		width: 100%;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
